透過參數決定路由內容 - 動態路由

當我們遇到一百個產品，當然不可能就建一百個路由，因此我們需要 動態路由 來幫助我們快速建立一百個路由(誤。

參考文章 : Vue Router-Dynamic Route動態路由

首先，先下載 axios，然後建立一個新元件

npm install axios

請求 RANDOM USER GENERATOR 的API遠端資料 :

https://randomuser.me/api/

建立一個新元件 : dynamic router

在其中建好 基本資料 與 遠端請求 之後，回到路由表再新增一個路由。

<template>
    <div>請看 console.log 接收到的遠端資料~ </div>
</template>

<script>
import axios from 'axios'
export default {
  created () {
    // RANDOM USER GENERATOR 的API
    axios.get('https://randomuser.me/api/')
      .then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
  }
}
</script>

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [{
      path: 'a',
      component: () => import('../views/componentA.vue')
    },
    {
      path: 'b',
      component: () => import('../views/componentB.vue')
    },
    {
      path: 'dynamicRouter',
      component: () => import('../views/DynamicRouter.vue')
    }]
    }]
  }
]

如何透過 id 取得相同的資料?

透過取得id 以及參數設定，我們就可以從隨機API資料中取得固定的資料。

<template>
    <div>請看 console.log 接收到的遠端資料~ </div>
</template>

<script>
import axios from 'axios'
export default {
  created () {
    // RANDOM USER GENERATOR 的API
    axios.get('https://randomuser.me/api/')
      .then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
  }
}
</script>

然後，在路由表上加上 :自定義名稱

{
      path: 'dynamicRouter/:id',
      component: () => import('../views/DynamicRouter.vue')
    },

並且在元件中透過 this.$route.params.自定義名稱 把動態路由的值取出來，就可以把這段id取出來並作為參數，決定路由內容。

$router.go (往回走 -1 等於前一頁) [color=green]

<script>
import axios from 'axios'
export default {
  created () {
       console.log(this.$route.params.id)
       const seed = this.$route.params.id

    // RANDOM USER GENERATOR 的API
    axios.get(`https://randomuser.me/api/?seed=${seed}`)
      .then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
  }
}
</script>

使用 router-link 取得動態路由資料

最後，我們在Newpage的 script 區塊設定一個 id，並在上方的 router link 中用 v-bind 方式取得 id

<router-link :to="`/product/:${item.id}`"

<template>
<div class="container">
   <div class="row">
      <div class="col-4">
        <div class="list-group">
         <router-link to="/newpage/a" class="list-group-item list-group-item-action" aria-current="true">選單a</router-link>
            <router-link to="/newpage/b" class="list-group-item list-group-item-action">選單b</router-link>
            <router-link to="/newpage/namedView" class="list-group-item list-group-item-action">命名視圖</router-link>
            <router-link :to="'/newpage/dynamicRouter/'+id" class="list-group-item list-group-item-action">動態路由</router-link>
         </div>
      </div>
      <div class="col-8">
         <router-view></router-view>
      </div>
   </div>
   </div>
</template>

<script>
export default {
  data () {
    return {
      id: 'e95b9481e09ec758'
    }
  }
}
</script>

動態路由搭配 Props

參考文章 : Vue Router-Dynamic Route動態路由

首先 新增/複製 一個 dynamicRouterByProps 的元件

<template>
    <div>請看 console.log 接收到的遠端資料~ </div>
</template>

<script>
import axios from 'axios'
export default {
  created () {
    console.log(this.$route.params.id)
    const seed = this.$route.params.id

    // RANDOM USER GENERATOR 的API
    axios.get(`https://randomuser.me/api/?seed=${seed}`)
      .then(res => {
        console.log(res)
      })
  }
}
</script>

也在路由表新增一個路由，並加上 proops，並以 this.id 來取得id。

{
      path: 'dynamicRouterByProps/:id',
      component: () => import('../views/DynamicRouterByProps.vue'),
      props: (route) => {
        return {
          id: route.params.id
        }
      }
    },

然後回到元件中加入 props

<template>
    <div>請看 console.log 接收到的遠端資料~ </div>
</template>

<script>
import axios from 'axios'
export default {
  props: ['id'],
  created () {
    console.log(this.id)
    const seed = this.id

    // RANDOM USER GENERATOR 的API
    axios.get(`https://randomuser.me/api/?seed=${seed}`)
      .then(res => {
        console.log(res)
      })
  }
}
</script>